<template>
  <div class="detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="detail-top"
                 :title="state.goodsInfo.goods_name"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="showShare = true">
      <template #right>
        <van-icon name="share-o"
                  size="18" />
      </template>
    </van-nav-bar>
    <!-- 商品图片 -->
    <van-swipe class="goods-img-swipe"
               @change="onChange">
      <van-swipe-item v-for="img in state.imgList">
        <van-image width="100%"
                   height="100%"
                   fit="contain"
                   :src="state.ossUrl+img" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ state.current + 1 }}/4
        </div>
      </template>
    </van-swipe>
    <div class="goods-info">
      <div class="fl main-info">
        <h4 class="limit-1">{{state.goodsInfo.goods_name}}</h4>
        <p class="limit-1">{{state.goodsInfo.goods_intro}}</p>
      </div>
      <div class="fr price-info">
        <p>优惠中</p>
        <h4>￥{{state.goodsInfo.money}}</h4>
      </div>
    </div>
    <div class="goods-shop">
      <img class="fl logo"
           :src="state.ossUrl+state.goodsInfo.brand_logo"
           :alt="state.goodsInfo.unit_name">
      <div class="shop-info">
        <p class="goods-name">{{state.goodsInfo.goods_name}}</p>
        <p class="shop-name">{{state.goodsInfo.unit_name}}</p>
      </div>
    </div>
    <div class="model-wrapper section">
      <div class="fl label">型号</div>
      <div class="models info">
        <div v-for="item in state.goodsInfo.modelArrDetail"
             :class="{'model-item':true,'checked':state.checkedModel == item.id}"
             @click="handleCheckModel(item)">
          <span>{{item.model_name}}</span>
          <span class="money">￥{{item.discount_money}}</span>
        </div>
      </div>
    </div>
    <div class="recomend-wrapper section">
      <div class="label">推荐商品</div>
      <div class="info">
        <div class="goods-item"
             v-for="item in state.goodsInfo.recommendGoodsArr"
             @click="toPage('detail',{goods_id:item.goods_id})">
          <img :src="state.ossUrl+item.img_z_logo1"
               alt="">
          <span class="goods-name limit-1">{{item.goods_name}}</span>
          <span class="goods-price">￥{{item.money}}</span>
        </div>
      </div>
    </div>
    <div class="detail-wrapper">
      <div class="label">商品信息</div>
      <div class="goods-detail"
           v-html="state.goodsInfo.goods_info">
      </div>
    </div>
    <van-action-bar class="">
      <van-action-bar-icon icon="chat-o"
                           text="客服"
                           dot />
      <van-action-bar-icon icon="cart-o"
                           text="购物车"
                           @click="toPage('cart')" />
      <van-action-bar-icon icon="shop-o"
                           text="店铺" />
      <van-action-bar-button type="warning"
                             text="加入购物车"
                             @click="handleAddGoodsToCart" />
      <van-action-bar-button type="danger"
                             text="立即购买" />
    </van-action-bar>
    <!-- 分享 -->
    <van-share-sheet v-model:show="showShare"
                     title="立即分享给好友"
                     :options="options" />
  </div>
</template>

<script>
import {
  onMounted,
  ref,
  reactive,
  watch,
  computed,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { getGoodsDetailData, addGoodsToCart } from "/@api/index";

export default {
  name: "Detail",
  data () {
    return {
      checkedModel: "",
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
        ],
      ],
    };
  },
  setup () {
    const { ctx } = getCurrentInstance();
    const state = reactive({
      ossUrl: "https://pms-uploads1.oss-cn-chengdu.aliyuncs.com",
      current: 0,
      goodsInfo: {},
      checkedModel: "",
      imgList: [],
    });
    const route = useRoute();
    const { push, go } = useRouter();
    watch(
      () => route.query,
      (query) => {
        initGoodsDetail(state, route.query);
      },
      { deep: true }
    );
    onMounted(() => {
      initGoodsDetail(state, route.query);
    });
    const onChange = (index) => {
      state.current = index;
    };
    const onClickLeft = () => {
      go(-1);
    };
    // 选择型号
    const handleCheckModel = (val) => {
      state.checkedModel = val.id;
    };
    const { toPage } = initTools(push);
    const handleAddGoodsToCart = async () => {
      if (!state.checkedModel) return ctx.$toast.fail("请先选择型号！");
      const params = {
        goods_id: state.goodsInfo.id,
        model_id: state.checkedModel,
        number: 1,
      };
      const { data } = await addGoodsToCart({ data: [params] });
      console.log(data);
      if (data.code != 300) return ctx.$toast.fail("添加失败！");
      ctx.$toast.success("添加成功！");
    };
    return {
      state,
      onChange,
      onClickLeft,
      toPage,
      handleAddGoodsToCart,
      handleCheckModel,
    };
  },
};
const initGoodsDetail = async (state, query) => {
  const { data } = await getGoodsDetailData(query.goods_id);
  state.goodsInfo = data.data;
  state.imgList = [
    data.data.img_z_logo2,
    data.data.img_c_logo2,
    data.data.img_f_logo2,
    data.data.img_b_logo2,
    data.data.img_x_logo2,
  ];
};

const initTools = (push, value) => {
  const toPage = (page, query) => {
    push({ path: "/" + page, query: query });
  };
  return { toPage };
};
</script>

<style scoped lang="less">
.detail-page {
  margin-bottom: 50px;
  & > .detail-top {
    background-color: #d41e32;
    ::v-deep(.van-icon),
    ::v-deep(.van-nav-bar__text),
    ::v-deep(.van-nav-bar__title) {
      color: #fff;
    }
  }
  .goods-img-swipe {
    position: relative;
    height: 300px;
    .van-swipe-item {
      font-size: 20px;
      background-color: #fff;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  & > .goods-info {
    height: 60px;
    width: 100%;
    color: #fff;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/images/price-back.jpg);

    & > .main-info {
      padding-left: 15px;
      line-height: 24px;
      padding-top: 6px;
      & > p {
        font-size: 0.8rem;
      }
      & > h4 {
        font-size: 1.1rem;
      }
    }
    & > .price-info {
      height: 60px;
      line-height: 24px;
      padding-top: 6px;
      text-align: right;
      padding-right: 15px;
      & > p {
        font-size: 0.8rem;
      }
      & > h4 {
        font-size: 1.2rem;
      }
    }
  }
  & > .goods-shop {
    height: 60px;
    padding: 5px 15px;
    box-sizing: border-box;
    background-color: #fff;
    & > .logo {
      max-height: 50px;
      margin-right: 10px;
    }
    .shop-info {
      padding: 5px 0;
      color: #333;
      font-size: 0.9rem;
      overflow: hidden;
      & > .goods-name {
        width: 150px;
      }
      & > .shop-name {
        font-size: 0.7rem;
        margin-top: 3px;
        color: #9c1625;
      }
    }
  }
  & > .section {
    height: 50px;
    padding: 0 15px;
    font-weight: 600;
    font-size: 0.8rem;
    background-color: #fff;
    & > .label {
      line-height: 50px;
      margin-right: 30px;
    }
    & > .info {
      overflow-x: auto;
      overflow-y: hidden;
      height: 100%;
    }
  }
  & > .model-wrapper {
    & > .models {
      & > .model-item {
        display: inline-flex;
        flex-flow: column;
        align-items: center;
        height: 40px;
        padding: 5px;
        margin-top: 5px;
        margin-right: 5px;
        font-size: 0.7rem;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #ddd;

        & > .money {
          color: #d41e32;
        }

        &.checked {
          border-color: #d41e32;
        }
      }
    }
  }
  & > .recomend-wrapper {
    height: 130px;
    & > .label {
      line-height: 24px;
    }
    & > .info {
      display: flex;
      height: 110px;
      & > .goods-item {
        display: inline-flex;
        flex-flow: column;
        align-items: center;
        flex-shrink: 0;
        flex-grow: 0;
        width: 80px;
        margin: 8px 0;
        padding: 5px;
        box-sizing: border-box;
        margin-right: 8px;
        overflow: hidden;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
        & > img {
          width: 60%;
        }
        & > .goods-name {
          font-size: 0.5rem;
          width: 100%;
          flex-shrink: 0;
        }
        & > .goods-price {
          font-size: 0.9rem;
          color: #d41e32;
        }
      }
    }
  }
  & > .detail-wrapper {
    background-color: #fff;
    & > .label {
      font-weight: 600;
      padding-left: 15px;
      line-height: 24px;
      font-size: 0.8rem;
    }
    & > .goods-detail {
      padding: 8px 10px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      ::v-deep(img) {
        width: 100%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
      }
    }
  }
}
</style>
